<!DOCTYPE html>
<html lang="en">
<head>
<title>Sandbox</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-latest.js"></script>
<script>

$(document).ready(function () {
  var $tabs = $('ul.tabs a');
  var panelIds = [];

  $tabs.each(function () {
    panelIds.push(this.hash);
  });

  var $panels = $(panelIds.join(','));

  $tabs.click(function () {
    $tabs.removeClass('selected');
    $(this).addClass('selected');
    $panels.hide();
    $panels.filter(this.hash).show();
    return false;
  }).filter(':first').click();
});


</script>
</head>
<body id="tabs">
<ul class="tabs">
  <li><a href="#copyright">Copyright notice</a></li>
  <li><a href="#terms">Terms and conditions</a></li>
  <li><a href="#accessibility">Accessibility statement</a></li>
</ul>
<div id="copyright">
  <h2>Copyright</h2>
  <p><a href="#terms">terms</a></p>
</div>
<div id="terms">
  <h2>Terms and conditions</h2>
  <p>...</p>
</div>
<div id="accessibility">
  <h2>Accessibility statement</h2>
  <p>...</p>
</div>

</body>
</html>